<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" height="400" persistent width="600">
      <template v-slot:activator="{ props }">
        <v-btn class="btn" color="rgba(191, 219, 255)" v-bind="props">上传记录</v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="text-h5">我的记录</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <div class="popup-body">
              <!-- 底部按钮 -->
              <div class="button-container">
                <v-card>
                  <v-tabs
                    v-model="tab"
                    align-tabs="center"
                    color="deep-purple-accent-4"
                  >
                    <v-tab :value="1">待审核</v-tab>
                    <v-tab :value="2">已通过</v-tab>
                    <v-tab :value="3">已拒绝</v-tab>
                  </v-tabs>
                  <v-window v-model="tab">
                    <v-window-item
                      v-for="n in 3"
                      :key="n"
                      :value="n"
                    >
                      <v-container fluid>
                        <v-row>
                          <v-col
                            v-for="i in 6"
                            :key="i"
                            cols="12"
                            md="4"
                          >
                            <v-img
                              :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
                              :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
                              aspect-ratio="1"
                            ></v-img>
                          </v-col>
                        </v-row>
                      </v-container>
                    </v-window-item>
                  </v-window>
                </v-card>

              </div>
              <div class="content-area">
                <span class="content-placeholder">没有更多数据了</span>
              </div>
            </div>
          </v-container>
          <small></small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue-darken-1" variant="text" @click="dialog = false">关闭</v-btn>
          <v-btn color="blue-darken-1" variant="text" @click="dialog = false">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>


</template>
<script lang="ts">
export default {
  data: () => ({
    dialog: false,
    tab: 1
  }),
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {}
}
</script>


<style scoped>
.content-area {
  padding: 20px;
  margin: 20px 0;
  height: 115px;
}

.content-placeholder {
  font-size: 16px;
  color: #333;
  text-align: center;
}


.btn {
  margin-top: 27px;
  width: 146px;
  height: 66px;
  color: #FFD1DC;
  margin-left: -15px;
}
</style>
